* {
    margin: 0;
    padding: 0;

    #root {
        background: url(./image/背景图.jpg) no-repeat center;
        background-size: cover;

        .child1 {
            width: 90px;
            height: 60px;
            background-color: rgb(147, 184, 35);
            position: absolute;
            top: 48vh;
            border-radius: 5px;
            color: white;
            left: 3vw;
            animation: movediv1 8s;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
            animation-iteration-count: 1;
            -webkit-animation: movediv1 8s;
            -webkit-animation-timing-function: movediv1 8s;
            -webkit-animation-fill-mode: forwards;
            -webkit-animation-iteration-count: 1;
        }

        @keyframes movediv1 {
            0% {
                transform: rotate(0deg);
                background-color: rgb(147, 184, 35);
                left: 3vw;
            }

            10% {
                background-color: rgb(79, 193, 147);
                transform: rotate(30deg);
                left: 3vw;
            }

            50% {
                background-color: rgb(51, 198, 216);
                left: 95vw;
                transform: rotate(0deg);
            }

            100% {
                background-color: rgb(147, 184, 35);
                transform: rotate(-720deg);
                left: 3vw;
            }
        }

        @-webkit-keyframes movediv1 {
            0% {
                transform: rotate(0deg);
                background-color: rgb(147, 184, 35);
                left: 3vw;
            }

            10% {
                background-color: rgb(79, 193, 147);
                transform: rotate(30deg);
                left: 3vw;
            }

            50% {
                background-color: rgb(51, 198, 216);
                left: 95vw;
                transform: rotate(0deg);
            }

            100% {
                background-color: rgb(147, 184, 35);
                transform: rotate(-720deg);
                left: 3vw;
            }
        }

        .child2 {
            height: 200px;
            width: 300px;
            background: url(./image/美食图片.jpg) no-repeat center;
            background-size: cover;
            left: 3vw;
            position: absolute;

            &:hover {
                transform: scale(1.3);
            }
        }

        #box {
            position: relative;
            // border: 1px solid red;
            width: 100px;
            height: 100px;
            left: 48%;
            top: 46%;
            transform-style: preserve-3d;
            transform: rotateX(30deg) rotateY(30deg);
            animation: dorotate 10s;
            -webkit-animation: dorotate 5s linear infinite;

            .bc1 {
                border: 1px solid red;
                height: 100px;
                width: 100px;
                color: white;
                line-height: 100px;
                text-align: center;
                background-color: rgba(196, 28, 28, 0.1);
                transform: translateY(-50px) rotateX(-90deg);
                position: absolute;
            }

            .bc2 {
                border: 1px solid red;
                height: 100px;
                width: 100px;
                color: white;
                line-height: 100px;
                text-align: center;
                background-color: rgba(196, 28, 28, 0.1);
                transform: translateY(50px) rotateX(90deg);
                position: absolute;
            }

            .bc3 {
                border: 1px solid red;
                height: 100px;
                width: 100px;
                color: white;
                line-height: 100px;
                text-align: center;
                background-color: rgba(196, 28, 28, 0.1);
                transform: translateX(-50px) rotateY(90deg);
                position: absolute;
            }

            .bc4 {
                border: 1px solid red;
                height: 100px;
                width: 100px;
                color: white;
                line-height: 100px;
                text-align: center;
                background-color: rgba(196, 28, 28, 0.1);
                transform: translateX(50px) rotateY(-90deg);
                position: absolute;
            }

            .bc5 {
                border: 1px solid red;
                height: 100px;
                width: 100px;
                color: white;
                line-height: 100px;
                text-align: center;
                background-color: rgba(196, 28, 28, 0.1);
                transform: translateZ(-50px);
                position: absolute;
            }

            .bc6 {
                border: 1px solid red;
                height: 100px;
                width: 100px;
                color: white;
                line-height: 100px;
                text-align: center;
                background-color: rgba(196, 28, 28, 0.1);
                transform: translateZ(50px) rotateX(180deg);
                position: absolute;
            }
        }
        @keyframes dorotate {
            0% {
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
        
            10% {
                transform: rotateX(36deg) rotateY(36deg) rotateZ(36deg);
            }
        
            20% {
                transform: rotateX(72deg) rotateY(72deg) rotateZ(72deg);
            }
        
            30% {
                transform: rotateX(108deg) rotateY(108deg) rotateZ(108deg);
            }
        
            40% {
                transform: rotateX(144deg) rotateY(144deg) rotateZ(144deg);
            }
        
            50% {
                transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
            }
        
            60% {
                transform: rotateX(216deg) rotateY(216deg) rotateZ(216deg);
            }
        
            70% {
                transform: rotateX(252deg) rotateY(252deg) rotateZ(252deg);
            }
        
            80% {
                transform: rotateX(288deg) rotateY(288deg) rotateZ(288deg);
            }
        
            90% {
                transform: rotateX(324deg) rotateY(324deg) rotateZ(324deg);
            }
        
            100% {
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }
        
        @-webkit-keyframes dorotate {
            0% {
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
        
            10% {
                transform: rotateX(36deg) rotateY(36deg) rotateZ(36deg);
            }
        
            20% {
                transform: rotateX(72deg) rotateY(72deg) rotateZ(72deg);
            }
        
            30% {
                transform: rotateX(108deg) rotateY(108deg) rotateZ(108deg);
            }
        
            40% {
                transform: rotateX(144deg) rotateY(144deg) rotateZ(144deg);
            }
        
            50% {
                transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
            }
        
            60% {
                transform: rotateX(216deg) rotateY(216deg) rotateZ(216deg);
            }
        
            70% {
                transform: rotateX(252deg) rotateY(252deg) rotateZ(252deg);
            }
        
            80% {
                transform: rotateX(288deg) rotateY(288deg) rotateZ(288deg);
            }
        
            90% {
                transform: rotateX(324deg) rotateY(324deg) rotateZ(324deg);
            }
        
            100% {
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }
    }
}
